<!--
 * @Author: 107w 8801453+lu-shangru@user.noreply.gitee.com
 * @Date: 2023-04-04 16:06:16
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2024-05-06 10:39:13
 * @Description:
 *
 * Copyright (c) 2023 by 107w, All Rights Reserved.
-->
<template>
  <div class="login-container">
    <div class="login_box">
      <div class="login_box_left">
        <h3 class="plat_title">磐石云运维管理系统</h3>
      </div>
      <div class="login_box_right">
        <form class="form">
          <p class="form-title">登录</p>
          <!-- <div class="input-container">
            <input
              ref="name"
              v-model="loginForm.company"
              placeholder="输入公司名"
              type="text"
              @keyup.enter="loginFormSubmit"
            >
            <span>
              <svg
                t="1692076692887"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="4208"
                width="200"
                height="200"
              >
                <path
                  d="M672 320a160 160 0 1 0-160 160 160 160 0 0 0 160-160z m64 0A224 224 0 1 1 512 96a224 224 0 0 1 224 224z"
                  p-id="4209"
                />
                <path
                  d="M224 832a32 32 0 0 1-64 0 352 352 0 0 1 704 0 32 32 0 0 1-64 0 288 288 0 0 0-576 0z"
                  p-id="4210"
                />
              </svg>
            </span>
          </div> -->
          <div class="input-container">
            <input
              ref="name"
              v-model="loginForm.name"
              placeholder="输入账号"
              type="text"
              @keyup.enter="loginFormSubmit"
            >
            <span>
              <svg
                t="1692076692887"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="4208"
                width="200"
                height="200"
              >
                <path
                  d="M672 320a160 160 0 1 0-160 160 160 160 0 0 0 160-160z m64 0A224 224 0 1 1 512 96a224 224 0 0 1 224 224z"
                  p-id="4209"
                />
                <path
                  d="M224 832a32 32 0 0 1-64 0 352 352 0 0 1 704 0 32 32 0 0 1-64 0 288 288 0 0 0-576 0z"
                  p-id="4210"
                />
              </svg>
              <!-- <svg
            stroke="currentColor"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"
              stroke-width="2"
              stroke-linejoin="round"
              stroke-linecap="round"
            ></path>
          </svg> -->
            </span>
          </div>
          <div class="input-container">
            <input
              v-model="loginForm.passwd"
              placeholder="输入密码"
              type="password"
              @keyup.enter="loginFormSubmit"
            >
            <span>
              <svg
                t="1692071522990"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="4051"
                width="200"
                height="200"
              >
                <path
                  d="M288 384v-74.666667c0-123.722667 100.266667-224 224-224s224 100.224 224 224v74.666667h10.677333C811.445333 384 864 436.597333 864 501.333333v320c0 64.821333-52.469333 117.333333-117.322667 117.333334H277.333333C212.554667 938.666667 160 886.069333 160 821.333333V501.333333c0-64.821333 52.469333-117.333333 117.322667-117.333333H288z m64 0h320v-74.666667c0-88.426667-71.605333-160-160-160-88.384 0-160 71.626667-160 160v74.666667zM224 501.333333v320c0 29.397333 23.914667 53.333333 53.322667 53.333334H746.666667A53.269333 53.269333 0 0 0 800 821.333333V501.333333c0-29.397333-23.914667-53.333333-53.322667-53.333333H277.333333A53.269333 53.269333 0 0 0 224 501.333333z"
                  fill="#000000"
                  p-id="4052"
                />
              </svg>
            </span>
          </div>
          <div class="submit" @click="loginFormSubmit">登录</div>
          <p class="signup-link">忘记密码请联系管理员</p>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
// import md5 from 'js-md5'
export default {
  name: 'Login',
  data() {
    return {
      loginForm: {
        // company: '',
        name: '',
        passwd: ''
      },
      rules: {
        // company: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        name: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        passwd: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      },
      qrcodeSrc: '',
      isCheck: true
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.name.focus()
    })
  },
  created() {},
  methods: {
    ...mapActions(['user/login', 'user/getMenuInfo']),
    // 登录表单提交
    async loginFormSubmit() {
      // if (!this.loginForm.company) return this.$message.error('请输入公司名')
      if (!this.loginForm.name) return this.$message.error('请输入用户名')
      if (!this.loginForm.passwd) return this.$message.error('请输入密码')
      try {
        const params = {
          // company: this.loginForm.company,
          username: this.loginForm.name,
          password: this.loginForm.passwd
          // passwd: md5(this.loginForm.passwd),
        }
        const res = await this['user/login'](params)
        if (res.code === 200) {
          this.$router.push('/')
          // if (res.result.googleStatus === 0) {
          //   this.$router.push({
          //     path: '/activation',
          //     query: { account: res.result.account },
          //   })
          // } else {
          //   this.$router.push({
          //     path: '/loginMFA',
          //     query: { account: res.result.account },
          //   })
          // }
        }
      } catch (error) {
        console.log(error)
      }
      // this.$refs.loginForm.validate(async(valid) => {
      //   if (valid) {

      //   } else {
      //     console.log('error submit!!')
      //     return false
      //   }
      // })
    }
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  width: 100vw;
  height: 100vh;
  background-color: #f5f7fb;
  display: flex;
  justify-content: center;
  align-items: center;
  .login_box {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
      0 4px 6px -2px rgba(0, 0, 0, 0.05);
    display: flex;
    width: 960px;
    height: 540px;
    border-radius: 8px;
    overflow: hidden;
    .login_box_left {
      width: 60%;
      .plat_title {
        margin-top: 30px;
        margin-left: 36px;
        font-size: 24px;
        color: #484b52;
      }
    }
    .login_box_right {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #fff;
      width: 40%;
    }
  }
}
.login_box_left {
  background: url('~@/assets/common/loginbc.png') no-repeat;
  -webkit-background-size: cover;
  background-size: 106%;
  background-position: top -4px left -4px;
}
// 登录表单样式

.form {
  background-color: #fff;
  display: block;
  padding: 1rem;
  max-width: 350px;
}

.form-title {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
  text-align: center;
  color: #000;
}

.input-container {
  position: relative;
}

.input-container input,
.form button {
  outline: none;
  border: 1px solid #e5e7eb;
  margin: 8px 0;
}

.input-container input {
  background-color: #fff;
  padding: 1rem;
  padding-right: 2rem;
  margin-right: 3rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  width: 314px;
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.input-container span {
  display: grid;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  padding-left: 1rem;
  padding-right: 1rem;
  place-content: center;
}

.input-container span svg {
  color: #9ca3af;
  width: 1rem;
  height: 1rem;
}

.submit {
  cursor: pointer;
  margin-top: 10px;
  box-sizing: border-box;
  text-align: center;
  width: 100%;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  background-color: #4f46e5;
  color: #ffffff;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  border-radius: 0.5rem;
  text-transform: uppercase;
}

.signup-link {
  color: #6b7280;
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-align: center;
}

.signup-link a {
  text-decoration: underline;
}
// loading
.three-body {
  --uib-size: 35px;
  --uib-speed: 0.8s;
  --uib-color: #5d3fd3;
  position: relative;
  display: inline-block;
  height: var(--uib-size);
  width: var(--uib-size);
  animation: spin78236 calc(var(--uib-speed) * 2.5) infinite linear;
}

.three-body__dot {
  position: absolute;
  height: 100%;
  width: 30%;
}

.three-body__dot:after {
  content: '';
  position: absolute;
  height: 0%;
  width: 100%;
  padding-bottom: 100%;
  background-color: var(--uib-color);
  border-radius: 50%;
}

.three-body__dot:nth-child(1) {
  bottom: 5%;
  left: 0;
  transform: rotate(60deg);
  transform-origin: 50% 85%;
}

.three-body__dot:nth-child(1)::after {
  bottom: 0;
  left: 0;
  animation: wobble1 var(--uib-speed) infinite ease-in-out;
  animation-delay: calc(var(--uib-speed) * -0.3);
}

.three-body__dot:nth-child(2) {
  bottom: 5%;
  right: 0;
  transform: rotate(-60deg);
  transform-origin: 50% 85%;
}

.three-body__dot:nth-child(2)::after {
  bottom: 0;
  left: 0;
  animation: wobble1 var(--uib-speed) infinite calc(var(--uib-speed) * -0.15)
    ease-in-out;
}

.three-body__dot:nth-child(3) {
  bottom: -5%;
  left: 0;
  transform: translateX(116.666%);
}

.three-body__dot:nth-child(3)::after {
  top: 0;
  left: 0;
  animation: wobble2 var(--uib-speed) infinite ease-in-out;
}

@keyframes spin78236 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes wobble1 {
  0%,
  100% {
    transform: translateY(0%) scale(1);
    opacity: 1;
  }

  50% {
    transform: translateY(-66%) scale(0.65);
    opacity: 0.8;
  }
}

@keyframes wobble2 {
  0%,
  100% {
    transform: translateY(0%) scale(1);
    opacity: 1;
  }

  50% {
    transform: translateY(66%) scale(0.65);
    opacity: 0.8;
  }
}
</style>
